<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/mobile/import/taglib.jsp"%>
<html>
<head>
	<title>我的订单</title>
	<%@ include file="/WEB-INF/views/mobile/import/meta.jsp"%>
	<link href="${ctxStatic}/modules/bootstrap/css/style.css" rel="stylesheet">
	<script type="text/javascript">
		//判断是否登录
		isLogin();
		function isLogin(){
			var cookieService = new  MallCookieService();
			var userId = cookieService.getUserId();
			if(userId==null || userId==""){
				//已登录
				alert("请在登录后操作。");
				var url="${ctxShop}/shoping/toLogin";
				location.href=url;
			}
		}
	
		var ctxFront = "${ctxFront}";
		var ctxShop = "${ctxShop}";
		
		function toOrderList(url){
			document.location=url;
		}
		
		function toOrderDetail(url){
			document.location=url;
		}
	</script>
	<script type="text/javascript"> 
		$(document).ready(function() {
			//预加载图片
			startLoadImage();
		});
		function startLoadImage(){
			$(".displayImages").each(function(index){
				loadImage($(this).attr("id"),$(this).attr("path"),loadResult);
			});
		}
	</script>
</head>
<body data-role="page">
	<!--导航条-->
	<%@ include file="/WEB-INF/views/mobile/import/top.jsp"%>
	
	<div role="main" class="ui-content" style="padding:0px 0em 3em 0em; margin-top: 40px;">
		<div id="popup" data-role="popup" data-position-to="window" data-overlay-theme="a" data-theme="b" class="ui-content">
		  <p></p>
		</div>
		<div data-role="header" class="ui-header" data-position="fixed" data-tap-toggle="false" style="border-bottom: 0px;">
			<div data-role="navbar" data-grid="c" style="text-align: center;line-height: 50px; background-color: #fff;">
				<label style="float:left;width: 20%;height: 50px;font-weight: bold;" <c:if test="${type==1 }">class="custom-color"</c:if> onclick="toOrderList('${ctxShop }/shoping/myOrder/orderList?type=1&userId=${user.id}')">全部</label>
				<label style="float:left;width: 20%;height: 50px;font-weight: bold;" <c:if test="${type==2 }">class="custom-color"</c:if> onclick="toOrderList('${ctxShop }/shoping/myOrder/orderList?type=2&userId=${user.id}')">待付款</label>
				<label style="float:left;width: 20%;height: 50px;font-weight: bold;" <c:if test="${type==7 }">class="custom-color"</c:if> onclick="toOrderList('${ctxShop }/shoping/myOrder/orderList?type=7&userId=${user.id}')">处理中</label>
				<label style="float:left;width: 20%;height: 50px;font-weight: bold;" <c:if test="${type==5 }">class="custom-color"</c:if> onclick="toOrderList('${ctxShop }/shoping/myOrder/orderList?type=5&userId=${user.id}')">已完成</label>
				<label style="float:left;width: 20%;height: 50px;font-weight: bold;" <c:if test="${type==6 }">class="custom-color"</c:if> onclick="toOrderList('${ctxShop }/shoping/myOrder/orderList?type=6&userId=${user.id}')">已取消</label>
				<label style="width: 100%;">
					<img src="${ctxStatic}/modules/bootstrap/img/t${type}.png" height="20px" width="100%" style="margin-top: -10px"/>
				</label>
			</div>
		</div>
		<form id="listForm" action="${ctxShop}/myOrder/orderList" method="post" class="form-horizontal" style="padding:0em 1em 0em 1em;">
		<input type="hidden" id="username" name="username" value="${user.name }"/>
		<input type="hidden" id="userId" name="userId" value="${userId }"/>
		<input type="hidden" id="type" name="type" value="${type }"/>
		<tags:mbmessage content="${message}"/>
		<!--我的订单 -->
		<c:if test="${fn:length(orders)>0}">
		<c:forEach items="${orders}" var="order" varStatus="vs">
		
<div class="row" style="border: 1px #f9f9f9; solid;">
      <div class="col-md-12">
		<div class="panel panel-default">
		<ul data-role="listview" data-inset="true" data-divider-theme="a" class="order-ui" style=" height: 150px;">
			<li data-role="list-divider">
				<div class="workflow-img">
					<!-- 待付款 -->
					<c:if test="${order.workflowNode==1}">
					<img src="${ctxStatic}/modules/bootstrap/img/1.png" height="40" width="100%"/>
					</c:if>
					<!-- 已支付，处理中 -->
					<c:if test="${order.workflowNode==2}">
					<img src="${ctxStatic}/modules/bootstrap/img/2.png" height="40" width="100%"/>
					</c:if>
					<!-- 货到付款，处理中 -->
					<c:if test="${order.workflowNode==3}">
					<img src="${ctxStatic}/modules/bootstrap/img/3.png" height="40" width="100%"/>
					</c:if>
					<!-- 已支付，处理中，已指定送货员 -->
					<c:if test="${order.workflowNode==4}">
					<img src="${ctxStatic}/modules/bootstrap/img/4.png" height="40" width="100%"/>
					</c:if>
					<!-- 已支付，处理中，已指定送货员，配送中 -->
					<c:if test="${order.workflowNode==5}">
					<img src="${ctxStatic}/modules/bootstrap/img/5.png" height="40" width="100%"/>
					</c:if>
					<!-- 已支付，处理中，已指定送货员，配送中，已完成 -->
					<c:if test="${order.workflowNode==6}">
					<img src="${ctxStatic}/modules/bootstrap/img/6.png" height="40" width="100%"/>
					</c:if>
					<!-- 货到付款，处理中，已指定送货员 -->
					<c:if test="${order.workflowNode==7}">
					<img src="${ctxStatic}/modules/bootstrap/img/7.png" height="40" width="100%"/>
					</c:if>
					<!-- 货到付款，处理中，已指定送货员，配送中 -->
					<c:if test="${order.workflowNode==8}">
					<img src="${ctxStatic}/modules/bootstrap/img/8.png" height="40" width="100%"/>
					</c:if>
					<!-- 货到付款，处理中，已指定送货员，配送中，已完成 -->
					<c:if test="${order.workflowNode==9}">
					<img src="${ctxStatic}/modules/bootstrap/img/9.png" height="40" width="100%"/>
					</c:if>
			    </div>
			</li>
			<li data-icon="false">
		    	<a href="javascript:" onclick="toOrderDetail('${ctxShop}/shoping/myOrder/orderDetail?orderNo=${order.orderNo }&userId=${userId }&type=${type }')">
		    		<div class="product-img" style="width: 108px; height: 80px; margin-top: 6px;">
				    	<img id="photo${vs.index }" class="displayImages" src="${ctxStatic}/modules/bootstrap/img/loading.png" path="${ctxShop}/download?filePath=${order.detailList[0].product.logoUrl }">
				    </div>
				    <p style="width: 55%;"><label class="float-left huise-color">${order.orderNo }</label></p>
				    <p style="width: 55%;"><label class="float-left huise-color">要求送达时间：</label></p>
				    <p style="width: 55%;"><label class="float-left huise-color">${order.timeSlot.timeText }</label></p>
				    <p style="width: 58%;"><label id="detailAmount" class="float-right amount" style="margin-right: 1em;">￥<fmt:formatNumber value="${order.amount }" pattern="#.##" minFractionDigits="2" /></label></p>
		    		<!-- span class="float-right check_arrow_max"></span -->
		    	</a>
			    <p class="ui-li-aside" style="top: 78px; left: 133px; right: auto;">
			    	<c:if test="${order.delFlag=='0' && order.payStatus=='0' && order.payType!='1'}">
						<img alt="" src="${ctxStatic}/modules/bootstrap/img/pay.png" height="20" style="margin: 0px;">
					</c:if>
					<c:if test="${order.delFlag=='0' && order.orderType=='2'}">
						<label class="float-left huise-color">已完成</label>
				    </c:if>
				    <c:if test="${order.delFlag=='0' && order.orderType!='2' && order.payStatus=='0' && order.payType=='1' }">
						<label class="float-left huise-color">货到付款</label>
				    </c:if>
				    <c:if test="${order.delFlag=='0' && order.orderType!='2' && order.payStatus=='1'}">
						<label class="float-left huise-color">已付款</label>
				    </c:if>
				    <c:if test="${order.delFlag=='1'}">
						<label class="float-left huise-color">已取消</label>
				    </c:if>
			    </p>
		    </li>
		</ul>
	</div>
	</div>
</div>
		</c:forEach>
		</c:if>
		<c:if test="${fn:length(orders)==0}">
		<div class="cart-empty">
			<img alt="" src="${ctxStatic}/modules/bootstrap/img/noOrder.png" width="60" height="60" style="vertical-align: middle;">&nbsp;没有查询到您的订单！
		</div>
		</c:if>
		</form>
	</div>
</body>
</html>
